<template>
  <h3>Watch 情况二 监视[ Ref ] 定义的【对象类型】的数据</h3>

  <ul>
    <li>name:{{ person.name }}</li>
    <li>age:{{ person.age }}</li>
    <button @click="ChangeName">ChangeName</button>
    <button @click="ChangeAge">ChangeAge</button>
    <button @click="ChangPerson">修改整个人</button>
  </ul>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
let person = ref({
  name: "张三",
  age: 18,
});

//--=============
function ChangeName() {
  person.value.name += "~";
}

function ChangeAge() {
  person.value.age += 1;
}

function ChangPerson() {
  person.value = {
    name: "李四",
    age: 30,
  };
}
//--======= 监视

/*
    如果直接写 person ， 只会整个 person 发生变化的时候才会触发，若想监视内部属性的变化要开启深度监视 ({ deep: true } )
    immediate:true  上来就会监视。
    Watch 第一个参数是： 被监视的数据库
    Watch 第二个参数是： 监视的回调
    Watch 第三个参数： 配置对象 (deep,immediate,...)
 */

watch(
  person,
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
  },
  { deep: true, immediate: true }
);
</script>

<style scoped>
button {
  margin: 0 10px;
}
</style>